add option to disable experimental CssChunkingPlugin #73286

ztanner · 2024-11-27T21:37:39Z

In app router experimental.cssChunking is enabled by default in "loose" mode. This is to solve issues with CSS ordering & reduce the number of requests for CSS resources (more information can be found in the original PR and the docs). However, it can lead to shared CSS from unrelated pages being included in the initially loaded CSS.

This isn't always desireable, as expressed in #70168. It also leads to a drift in behavior between dev/start, as the plugin is only implemented in start.

This provides a third option to the plugin to disable it completely for those who are ok with the trade-offs of not having it enabled.

ztanner · 2024-11-27T21:37:57Z

add option to disable experimental CssChunkingPlugin #73286 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2024-11-27T21:43:01Z

Tests Passed

ijjk · 2024-11-27T21:45:38Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
buildDuration	20s	17.5s	N/A
buildDurationCached	16.8s	14.4s	N/A
nodeModulesSize	405 MB	405 MB	⚠️ +1.14 kB
nextStartRea..uration (ms)	455ms	455ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
131a20d7-HASH.js gzip	52.8 kB	52.8 kB	N/A
1515-HASH.js gzip	48.9 kB	48.9 kB	N/A
9408.HASH.js gzip	169 B	169 B	✓
9705-HASH.js gzip	5.31 kB	5.3 kB	N/A
framework-HASH.js gzip	57.6 kB	57.6 kB	✓
main-app-HASH.js gzip	231 B	232 B	N/A
main-HASH.js gzip	33.7 kB	33.7 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	57.8 kB	57.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
_app-HASH.js gzip	193 B	192 B	N/A
_error-HASH.js gzip	194 B	192 B	N/A
amp-HASH.js gzip	509 B	512 B	N/A
css-HASH.js gzip	342 B	342 B	✓
dynamic-HASH.js gzip	1.84 kB	1.85 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.43 kB	4.44 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	325 B	328 B	N/A
script-HASH.js gzip	397 B	398 B	N/A
withRouter-HASH.js gzip	325 B	323 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.37 kB	1.37 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
_buildManifest.js gzip	746 B	750 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
index.html gzip	523 B	523 B	✓
link.html gzip	536 B	538 B	N/A
withRouter.html gzip	519 B	518 B	N/A
Overall change	523 B	523 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	200 kB	200 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
middleware-b..fest.js gzip	669 B	668 B	N/A
middleware-r..fest.js gzip	155 B	155 B	✓
middleware.js gzip	31 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	999 B	999 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
732-experime...dev.js gzip	322 B	322 B	✓
732.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	323 kB	323 kB	✓
app-page-exp..prod.js gzip	125 kB	125 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page-tur..prod.js gzip	133 kB	133 kB	✓
app-page.run...dev.js gzip	314 kB	314 kB	✓
app-page.run..prod.js gzip	121 kB	121 kB	✓
app-route-ex...dev.js gzip	36 kB	36 kB	✓
app-route-ex..prod.js gzip	24.4 kB	24.4 kB	✓
app-route-tu..prod.js gzip	24.4 kB	24.4 kB	✓
app-route-tu..prod.js gzip	24.2 kB	24.2 kB	✓
app-route.ru...dev.js gzip	37.7 kB	37.7 kB	✓
app-route.ru..prod.js gzip	24.2 kB	24.2 kB	✓
pages-api-tu..prod.js gzip	9.57 kB	9.57 kB	✓
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	✓
pages-api.ru..prod.js gzip	9.56 kB	9.56 kB	✓
pages-turbo...prod.js gzip	21 kB	21 kB	✓
pages.runtim...dev.js gzip	26.6 kB	26.6 kB	✓
pages.runtim..prod.js gzip	21 kB	21 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.34 MB	2.34 MB	✓

build cache

	vercel/next.js canary	vercel/next.js 11-27-add_option_to_disable_experimental_csschunkingplugin	Change
0.pack gzip	2.03 MB	2.03 MB	N/A
index.pack gzip	148 kB	148 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2983],
   {
-    /***/ 1277: /***/ (
+    /***/ 7740: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(7750);
+          return __webpack_require__(9582);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 141: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2169: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(4961)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9272)
+        __webpack_require__(6404)
       );
-      const _getimgprops = __webpack_require__(9353);
-      const _imageconfig = __webpack_require__(6004);
-      const _imageconfigcontextsharedruntime = __webpack_require__(558);
-      const _warnonce = __webpack_require__(1444);
-      const _routercontextsharedruntime = __webpack_require__(4231);
+      const _getimgprops = __webpack_require__(4173);
+      const _imageconfig = __webpack_require__(8672);
+      const _imageconfigcontextsharedruntime = __webpack_require__(4154);
+      const _warnonce = __webpack_require__(1512);
+      const _routercontextsharedruntime = __webpack_require__(1075);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3109)
+        __webpack_require__(3697)
       );
-      const _usemergedref = __webpack_require__(1082);
+      const _usemergedref = __webpack_require__(5598);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 1082: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5598: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 9353: /***/ (
+    /***/ 4173: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(1444);
-      const _imageblursvg = __webpack_require__(6240);
-      const _imageconfig = __webpack_require__(6004);
+      const _warnonce = __webpack_require__(1512);
+      const _imageblursvg = __webpack_require__(2356);
+      const _imageconfig = __webpack_require__(8672);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 6240: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2356: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 9893: /***/ (
+    /***/ 1609: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1739);
-      const _getimgprops = __webpack_require__(9353);
-      const _imagecomponent = __webpack_require__(141);
+      const _getimgprops = __webpack_require__(4173);
+      const _imagecomponent = __webpack_require__(2169);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3109)
+        __webpack_require__(3697)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 3109: /***/ (__unused_webpack_module, exports) => {
+    /***/ 3697: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 7750: /***/ (
+    /***/ 9582: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-b01722d5-20241114/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(9035);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-b01722d5-20241114_re_kp7s4ef2voul2kphq24roenapq/node_modules/next/image.js
-      var next_image = __webpack_require__(5912);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-b01722d5-20241114_re_g2b75t4yyljcdn7exmmiht4tum/node_modules/next/image.js
+      var next_image = __webpack_require__(761);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 5912: /***/ (
+    /***/ 761: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(9893);
+      module.exports = __webpack_require__(1609);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(1277)
+      __webpack_exec__(7740)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 1515-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Commit: 046050c

ijjk added created-by: Next.js team PRs by the Next.js team. tests type: next labels Nov 27, 2024

add option to disable experimental CssChunkingPlugin

046050c

ztanner force-pushed the 11-27-add_option_to_disable_experimental_csschunkingplugin branch from 271668f to 046050c Compare November 27, 2024 21:45

ijjk added the Documentation Related to Next.js' official documentation. label Nov 27, 2024

ztanner marked this pull request as ready for review November 27, 2024 21:45

ztanner requested review from sokra, ijjk and samcx November 27, 2024 21:45

ijjk approved these changes Nov 27, 2024

View reviewed changes

ztanner merged commit fdaf35b into canary Nov 27, 2024
110 of 115 checks passed

ztanner deleted the 11-27-add_option_to_disable_experimental_csschunkingplugin branch November 27, 2024 22:31

github-actions bot added the locked label Dec 12, 2024

github-actions bot locked as resolved and limited conversation to collaborators Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add option to disable experimental CssChunkingPlugin #73286

add option to disable experimental CssChunkingPlugin #73286

ztanner commented Nov 27, 2024 •

edited

Loading

ztanner commented Nov 27, 2024

ijjk commented Nov 27, 2024 •

edited

Loading

ijjk commented Nov 27, 2024 •

edited

Loading

add option to disable experimental CssChunkingPlugin #73286

add option to disable experimental CssChunkingPlugin #73286

Conversation

ztanner commented Nov 27, 2024 • edited Loading

ztanner commented Nov 27, 2024

ijjk commented Nov 27, 2024 • edited Loading

Tests Passed

ijjk commented Nov 27, 2024 • edited Loading

Stats from current PR

ztanner commented Nov 27, 2024 •

edited

Loading

ijjk commented Nov 27, 2024 •

edited

Loading

ijjk commented Nov 27, 2024 •

edited

Loading